<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button onclick="doAjax()">$.ajax()</button>
        <button onclick="doAjaxGet()">$.get()</button>
        <button onclick="doAjaxGetJson()">$.getJson()</button>
        <button onclick="doAjaxPost()">$.post()</button>
        <button onclick="doload()">$.load()</button>
    </div>
    <div id="result"></div>
</body>
<script src="js/jquery.min.js"></script>
<script>

    function doload() {
        // $( "#result" ).load( "/doajax",{msg:1}, function(result) {
        //     alert(result);
        // });
        $( "#result" ).load( "/doGet");
    }
    function doAjaxPost() {
        let url="/doPost"
        //let param="id=1&name=xiaomi&letter=x";
        let param ={"id":1,"name":xiaomi,"letter":x};

        $.post(url,param,function (result) {
            console.log(result);
        })


    }
    function doAjaxGetJson() {
        let url="/doGet"
        let params ="";
        $.getJSON(url,params,function (result) {
            $("#result").html(result);
        });
    }
    
    function doAjaxGet() {
        let url="/doGet"
        let params ="";
        $.get(url,params,function (result) {
            $("#result").html(result);
        });
    }
    function doAjax() {
        let url = "/doajax";
        let params ="msg=hello jquery ajax"
        $.ajax({
            url:url,
            data:params,
            success:function (result) {
                $("#result").html(result);
            },
            error:function (result) {
                console.log(result);
            }

        })


    }
</script>
</html>